<template>
	<view class="pages" :class="themeName">
		<!-- 分销海报 -->
		<view class="invite-fans flex-col col-center">
			<image :src="imgPath" mode="widthFix" class="poster"></image>
			<invite-poster ref="poster" :options="options" @success="handleSuccess" />
			<view class="bg-white footer flex-1">
				<!-- <view class="m-b-40">
					<view class="m-b-10 sm lighter">{{$zhTran('我的邀请码')}}</view>
					<view class="flex row-between">
						<view class="font-size-44">{{ options.code }}</view>
						<view class="sm m-r-30 copy-btn" @tap="$copy(options.code)">{{$zhTran('点击复制')}}</view>
					</view>
				</view> -->
				<!-- #ifndef H5  -->
				<button class="save-btn br60" size="lg" @tap="saveImageToAlbum">
					{{$zhTran('保存到相册')}}
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button class="save-btn br60" size="lg">{{$zhTran('长按保存到相册')}}</button>
				<!-- #endif -->
			</view>
		</view>
		<loading-view v-show="loading"></loading-view>
		<w-jishuzhichi class="jishuzhichi-nodata" />
	</view>
</template>

<script>
	import {
		apiMnpQrCode,
		apiInvitePosterConfig,
	} from "@/api/app";
	import {
		baseURL,
		basePath
	} from "@/config/app";
	import invitePoster from "@/bundle/components/invite-poster/invite-poster.vue";
	export default {
		components: {
			invitePoster,
		},
		data() {
			return {
				imgPath: "",
				loading: true,
				options: {},
			}
		},

		async onLoad() {
			this.getPoster();
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			wx.hideShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},

		methods: {
			async getPoster() {
				try {
					const res = await Promise.all([
						apiInvitePosterConfig(),
						// #ifdef MP-WEIXIN
						apiMnpQrCode(),
						// #endif
					]);
					this.options = res[0];
					// #ifdef MP-WEIXIN
					this.options.qr_code = res[1]?.qr_code;
					// #endif
					this.options.link = `${baseURL}${basePath}?invite_code=${this.options.code}`;
					this.$refs.poster.drawCanvas();
				} catch (e) {
					this.$toast({
						title: e,
					});
				}
			},
			saveImageToAlbum() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.imgPath,
					success: (res) => {
						this.$toast({
							title: this.$zhTran("保存成功"),
						});
					},
					fail: (err) => {
						this.$toast({
							title: this.$zhTran("保存失败"),
						});
					},
				});
				// #endif
				// #ifdef H5
				this.$toast({
					title: this.$zhTran("请长按图片保存"),
				});
				// #endif
			},
			handleSuccess(val) {
				this.imgPath = val;
				this.loading = false;
			},
		},
	};
</script>
<style lang="scss">
	page {
		padding: 0;
	}

	.invite-fans {
		min-height: 100vh;
		overflow: hidden;

		.poster {
			width: 600rpx;
			margin: 40rpx 0;
		}

		.footer {
			padding: 30rpx;
			width: 100%;
		}

		.copy-btn {
			@include font_color();
		}

		.save-btn {
			color: #fff;
			@include background_color();
		}
	}
</style>